{$src}
<style type="text/css">
    .el-upload-list__item-name {
        cursor: pointer;
    }
</style>
<div class="upload-file-content" id="container-{$id}">
    <input type="hidden" name="{$name}" value="{$value}" :value="value"/>
    {$container_tpl}
    <el-dialog :visible.sync="dialogVisible" size="tiny">
        <img width="100%" :src="dialogImageUrl" alt=""/>
    </el-dialog>
</div>
<script type="text/javascript">
    if (!window.vue_handle) window.vue_handle = {};
    !(function () {
        var id = '{$id}';
        var name = '{$name}';
        var list = {$list|json_encode};
        window.vue_handle['vue_' + id] = new Vue({
            el: '#container-' + id,
            data() {
                return {
                    fileList: list,
                    value: '{$value}',
                    dialogImageUrl: '',
                    dialogVisible: false,
                    imgExt: ['jpg', 'jpeg', 'gif', 'png', 'bmp', 'svg',]
                };
            },
            methods: {
                notify: function (title, msg, type) {
                    this.$notify({
                        title: title,
                        dangerouslyUseHTMLString: true,
                        message: msg,
                        type: type || 'success'
                        // duration: 0
                    });
                },
                filter_file: function (fileList) {
                    var tmp = [];
                    for (var k in fileList) {
                        var row = fileList[k];
                        if (row.response && row.response.status==0) {
                            row.status = 'fail';
                            this.notify('提示', `文件${row.name}<span style="color: red;">未上传成功</span>,请稍候重新上传该文件`, 'error');
                            continue;
                        }
                        tmp.push(row);
                    }
                    this.fileList = tmp;
                },
                pushValue: function (file) {
                    var sp = this.value.split(',');
                    if (file.status == 'success') {
                        sp.push(file.response[name].id);
                    }
                    sp = sp.filter(s => {
                        return typeof (s) != 'undefined' && typeof (s) != 'null' && typeof (s) != 'boolean' && s.length > 0; // 删除空数组
                    });
                    this.value = sp.join(',');
                    return sp;
                },
                getExt: function (filename) {
                    if (!filename) return '';
                    var sp = filename.split('.');
                    if (sp.length <= 1) return '';
                    return sp[sp.length - 1];
                },
                isImg: function (ext) {
                    if (!ext) return false;
                    if ($.inArray(ext.toLowerCase(), this.imgExt) >= 0) {
                        return true;
                    }
                    return false;
                },
                handleSuccess(res, file, fileList) {
                    this.filter_file(fileList);
                    this.pushValue(file);
                },
                handleError(err, file, fileList) {
                    this.notify('提示',`文件${file.name}<span color="red">未上传成功</span>,请稍候重新上传该文件`, 'error');
                },
                handleChange(file, fileList) {},
                handleRemove(file, fileList) {
                    var id;
                    if(file.response){
                        id = file.response[name].id;
                    }else if(file.id) {
                        id = file.id;
                    }else {
                        this.notify('提示',`文件${file.name}删除失败`,'error');
                        return false;
                    }
                    var ex = this.value.split(',');
                    ex = ex.filter( s=> {
                        return !(id==s); // 删除
                    });
                    this.notify('提示',`文件${file.name}已删除`);
                    this.value = ex.join(',');
                },
                handlePreview(file) {
                    if (file.url && this.isImg(this.getExt(file.name))) {
                        this.dialogImageUrl = file.url;
                        this.dialogVisible = true;
                    }
                },
                handlePictureCardPreview(file) {
                },
                handleExceed(files, fileList) {
                    this.$message.warning(`当前限制选择 {$option.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
                },
                beforeRemove(file, fileList) {
                    return this.$confirm(`确定移除 ${file.name}？`);
                },
                submitUpload() {
                    this.$refs.upload.submit();
                },
            },
        })
    })();
</script>
